<script lang="ts" setup>
import ClassStatus from '../class/components/ClassStatus.vue'
import ClassLessonPicker from '../class/ClassLessonPicker.vue'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import type ProTable from '@/components/ProTable/index.vue'
import type { EnrollmentApi } from '@/apis'

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  expandable: undefined,
  originalClassList: undefined,
  changeLessonList: undefined,
})
interface Props {
  loading: boolean
  expandable: object
  originalClassList: EnrollmentApi.EnrollClassResp[]
  changeLessonList: Array<EnrollmentApi.EnrollLessonResp & { selected: boolean }>

}

const originalClassTableRef = ref<InstanceType<typeof ProTable>>()
const originalClassColumns: TableInstanceColumns[] = [
  { title: '班级', slotName: 'name', fixed: 'left', width: 360 },
  { title: '年份科目', dataIndex: 'classYear', slotName: 'classYear', width: 150 },
  { title: '校区教室', dataIndex: 'campusId', slotName: 'classroom', width: 120 },
  { title: '班级状态', dataIndex: 'classStatus', slotName: 'classStatus', width: 120 },
  { title: '上课进度(上/退/总)', dataIndex: 'classProgress', slotName: 'classProgress', width: 160 },
  { title: '调转课次', dataIndex: 'changeInfo', slotName: 'changeInfo', width: 160 },
]

const selectedLessonIndex = computed(() => {
  return props.changeLessonList.filter(item => item.selected).map(item => item.lessonIndex)
})
</script>

<template>
  <ProTable ref="originalClassTableRef" :data="props.originalClassList" :columns="originalClassColumns"
    :loading="props.loading" :pagination="false" :expandable="props.expandable" default-expand-all-rows>
    <!-- <template #title-panel>
          <a-checkbox v-model="form.onlyRemainLesson" :default-checked="true">
            仅转所有剩余未上课次
          </a-checkbox>
        </template> -->
    <template #expand-row>
      <ClassLessonPicker :lesson-list="changeLessonList" />
    </template>
    <template #name="{ record }">
      <CellClassInfo :id="record.id" :name="record.name" :lead-teacher-name="record.leadTeacherName"
        :assist-teacher-name="record.assistTeacherName" />
    </template>
    <template #classYear="{ record }">
      <DictLabel v-model="record.grade" code="Grade" /> ·
      <DictLabel v-model="record.subject" code="Subject" />
      <div class="font-size-13px text-gray-4">
        {{ record.classYear }}年 ·
        <DictLabel v-model="record.term" code="TermEnum" />
      </div>
    </template>
    <template #classroom="{ record }">
      <div>{{ record.classroomName || '-' }}</div>
      <div class="font-size-13px text-gray-4">
        {{ record.campusName }}
      </div>
    </template>
    <template #classStatus="{ record }">
      <ClassStatus code="ClassStatusEnum" :status="record.classStatus" />
    </template>
    <template #classProgress="{ record }">
      {{ record.enrollment.completedLessonCount }}/{{ record.enrollment.cancelLessonCount }}/{{
        record.enrollment.enrollLessonCount }}
    </template>
    <template #changeInfo>
      <a-trigger position="top" auto-fit-position>
        <a-typography-text type="primary" class="cursor-pointer">
          调转{{ selectedLessonIndex.length }}次课
        </a-typography-text>
        <template #content>
          <div class="tooltip-content">
            第{{ selectedLessonIndex.join('、') }}节课
          </div>
        </template>
      </a-trigger>
    </template>
  </ProTable>
</template>

<style></style>
